<template>
<!--缺陷状态-->
  <div style="padding: 10px">
    <el-table :data="rules" border>
      <el-table-column type="selection" label="全选"></el-table-column>
      <el-table-column prop="ruleNum" label="编号"></el-table-column>

      <el-table-column prop="ruleName" label="名称" width="300">

      </el-table-column>
      <el-table-column prop="ruleStatus" label="状态" :formatter="statusFormat" width="300">

      </el-table-column>
      <el-table-column  label="操作" width="300" >
        <template slot-scope="scope">
          <el-button type="primary" size="small" >修改</el-button>
          <el-button type="primary" size="small" >
            <span v-if="scope.row.ruleStatus==1">禁用</span>
            <span v-else-if="scope.row.ruleStatus==0">启用</span>
          </el-button>
          <el-button type="primary" size="small" @click="deleteRule(scope.row.ruleId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-pagination :current-page="pageIndex" @current-change="changePage" background layout="prev, pager, next" :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "rule",
  data(){
    return{
      rules:[],
      total:null,
      pageIndex:null
    }
  },
  methods:{
    loadRule(){
      this.$http.get("/rule/findRule").then(resp=>{
        if (resp.data.code==200){
          console.log(resp);
          this.total=resp.data.data.total;
          this.pageIndex=resp.data.data.pageIndex;
          this.rules=resp.data.data.ruleDtoList;
        }
      })
    },
    deleteRule(id){
      console.log(id);
    },
    statusFormat(row){
      if (row.ruleStatus==1){
        return "有效";
      }else {
        return "禁用";
      }
    },
    changePage(page){
      this.pageIndex = page;
      this.loadRule();
    }
  },
  created(){
    this.loadRule();
  }
}
</script>

<style scoped>

</style>